<Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Canvas x:Name="player" Width="333" Height="333">      
    
      <Canvas.Resources>        
        <Storyboard x:Name="timer">
          <DoubleAnimation Duration="00:00:00.07" Storyboard.TargetName="timerTarget" Storyboard.TargetProperty="Width"/>
        </Storyboard>
        <Storyboard x:Name="playPauseEnter">
          <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HighlightEllipse" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00.1500000" Value="#2DFFFFFF"/>
          </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="playPausePress">
          <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HighlightEllipse" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="#2D000000"/>
          </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="playPauseRelease">
          <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HighlightEllipse" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00.1000000" Value="#2DFFFFFF"/>
          </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Name="playPauseLeave">
          <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="HighlightEllipse" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00.2000000" Value="#00FFFFFF"/>
          </ColorAnimationUsingKeyFrames>
        </Storyboard>
      </Canvas.Resources>

      <Rectangle x:Name="timerTarget" Opacity="0" />      
      
      <Canvas x:Name="mainWindow" Width="333" Height="333.917" Clip="M0.5,5.5C0.5,2.73857625084603,2.73857625084603,0.5,5.5,0.5L326.5,0.5C329.261423749154,0.5,331.5,2.73857625084603,331.5,5.5L331.5,326.5C331.5,329.261423749154,329.261423749154,331.5,326.5,331.5L5.5,331.5C2.73857625084603,331.5,0.5,329.261423749154,0.5,326.5z" RenderTransformOrigin="0.5,0.5">

	<Rectangle Fill="#998A8A8A" Stroke="#97000000" StrokeThickness="1" RadiusX="5" RadiusY="5" Width="332" Height="332"/>
        <Rectangle Stroke="#97000000" StrokeThickness="0" RadiusX="6" RadiusY="6" Width="329" Height="330" Canvas.Top="2" Canvas.Left="2" >
          <Rectangle.Fill>
            <LinearGradientBrush EndPoint="0.5,-0.109" StartPoint="0.5,1.109">
              <GradientStop Color="#00FFFFFF" Offset="0.538"/>
              <GradientStop Color="#FFFFFFFF" Offset="0.553"/>
              <GradientStop Color="#00FFFFFF" Offset="0.755"/>
            </LinearGradientBrush>
          </Rectangle.Fill>
        </Rectangle>
        <Path Stretch="Fill" Stroke="#97000000" StrokeThickness="0" Width="449" Height="330" Canvas.Left="-114.5" Data="M0,6C0,2.7,2.7,0,6,0L540,0C543.3,0,546,2.7,546,6L546,94 0,94z" RenderTransformOrigin="0.5,0.5" Canvas.Top="2">
          <Path.Fill>
            <LinearGradientBrush EndPoint="0.612,0.254" StartPoint="0.483,0.934">
              <GradientStop Color="#00FFFFFF" Offset="0"/>
              <GradientStop Color="#5FFFFFFF" Offset="0.024"/>
              <GradientStop Color="#00FFFFFF" Offset="0.904"/>
              <GradientStop Color="#9CFFFFFF" Offset="0.913"/>
              <GradientStop Color="#00FFFFFF" Offset="1"/>
              <GradientStop Color="#33FFFFFF" Offset="0.49"/>
              <GradientStop Color="#93D7D7D7" Offset="0.562"/>
            </LinearGradientBrush>
          </Path.Fill>
          <Path.RenderTransform>
            <TransformGroup>
              <ScaleTransform ScaleX="2.2" ScaleY="1"/>
              <SkewTransform AngleX="0" AngleY="0"/>
              <RotateTransform Angle="0"/>
              <TranslateTransform X="0" Y="0"/>
            </TransformGroup>
          </Path.RenderTransform>
        </Path>
        <Path Data="M549.35,6.65 L549.35,445.35 C549.35,448.7 546.7,451.35 543.35,451.35 L6.65,451.35" Stretch="Fill" Stroke="#B173A5E8" StrokeThickness="1.3" Width="328" Height="328.6" Canvas.Left="4" Canvas.Top="3.4" />
        <Path Data="M0.5,445.5 L0.5,6.5C0.5,3.2,3.2,0.5,6.5,0.5L543.5,0.5"  Stretch="Fill" Stroke="#FFDADADA" StrokeThickness="1" Width="327" Height="327.4" Canvas.Top="1" Canvas.Left="1" />
        <Canvas RenderTransformOrigin="0.5,0.5" x:Name="playPauseButton" Width="83" Height="83" Canvas.Left="124" Canvas.Top="262.917">
          <Canvas.RenderTransform>
            <TransformGroup>
              <ScaleTransform ScaleX="0.5" ScaleY="0.5"/>
              <SkewTransform AngleX="0" AngleY="0"/>
              <RotateTransform Angle="0"/>
              <TranslateTransform X="0" Y="0"/>
            </TransformGroup>
          </Canvas.RenderTransform>
          <Ellipse Stroke="#46000000" StrokeThickness="1" Width="83" Height="83">
            <Ellipse.Fill>
              <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
                <GradientStop Color="#FF032372" Offset="0.215"/>
                <GradientStop Color="#FF173E92" Offset="0"/>
              </LinearGradientBrush>
            </Ellipse.Fill>
          </Ellipse>
          <Path Stretch="Fill" Stroke="#6D000000" StrokeThickness="1" x:Name="playIcon" Width="39" Height="40" Canvas.Left="27" Canvas.Top="21" Data="M-1,2 L38.085714,23.367521 -1,42 z" Opacity="0">
            <Path.Fill>
              <LinearGradientBrush EndPoint="0.5,-0.026" StartPoint="0.5,1.026">
                <GradientStop Color="#FFA5A5A6" Offset="0.317"/>
                <GradientStop Color="#FFFFFFFF" Offset="1"/>
              </LinearGradientBrush>
            </Path.Fill>
          </Path>
          <Canvas x:Name="pauseIcon" Width="38" Height="40" Canvas.Left="22" Canvas.Top="22" Opacity="0">
            <Rectangle Stroke="#6E000000" StrokeThickness="1" RadiusX="4" RadiusY="4" Width="15" Height="40">
              <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,-0.026" StartPoint="0.5,1.026">
                  <GradientStop Color="#FFA5A5A6" Offset="0.061"/>
                  <GradientStop Color="#FFFFFFFF" Offset="1"/>
                </LinearGradientBrush>
              </Rectangle.Fill>
            </Rectangle>
            <Rectangle Stroke="#6E000000" StrokeThickness="1" RadiusX="4" RadiusY="4" Width="15" Height="40" Canvas.Left="23">
              <Rectangle.Fill>
                <LinearGradientBrush EndPoint="0.5,-0.026" StartPoint="0.5,1.026">
                  <GradientStop Color="#FFA5A5A6" Offset="0.061"/>
                  <GradientStop Color="#FFFFFFFF" Offset="1"/>
                </LinearGradientBrush>
              </Rectangle.Fill>
            </Rectangle>
          </Canvas>
          <Ellipse StrokeThickness="0" Width="72" Height="68" Canvas.Left="5" Canvas.Top="1">
            <Ellipse.Fill>
              <LinearGradientBrush EndPoint="0.5,-0.029" StartPoint="0.5,1.029">
                <GradientStop Color="#00FFFFFF" Offset="0"/>
                <GradientStop Color="#90FFFFFF" Offset="1"/>
              </LinearGradientBrush>
            </Ellipse.Fill>
          </Ellipse>
          <Ellipse Stroke="#46000000" StrokeThickness="1" Width="83" Height="83" Fill="#00FFFFFF" x:Name="HighlightEllipse"/>
        </Canvas>
        <Rectangle Fill="#FF000000" Stroke="#72FFFFFF" StrokeThickness="1" RadiusX="6" RadiusY="6" Width="320" Height="240" Canvas.Left="6.5" Canvas.Top="27.917"/>
        
        <!-- video section -->
        <Canvas Canvas.Left="7" Canvas.Top="27.917" Clip="M0.5,6.5C0.5,3.18629150101524,3.18629150101524,0.5,6.5,0.5L313.5,0.5C316.813708498985,0.5,319.5,3.18629150101524,319.5,6.5L319.5,233.5C319.5,236.813708498985,316.813708498985,239.5,313.5,239.5L6.5,239.5C3.18629150101524,239.5,0.5,236.813708498985,0.5,233.5z">	  
	  
          <MediaElement x:Name="media" Canvas.Left="0" Width="320" Height="240" Canvas.Top="1" BufferingTime="0:0:0.10"/>

	  <Image x:Name="preview" Width="320" Height="240" Opacity="0.7" Canvas.Top="1" MouseLeftButtonDown="goFSM"/>
	
	  <!-- buffering widget -->
          <Canvas x:Name="wt" Visibility="Hidden" Canvas.Left="140" Canvas.Top="100">
            <Canvas.RenderTransform>
              <ScaleTransform ScaleX="1.0" ScaleY="1.0"/>
            </Canvas.RenderTransform>
            <Ellipse Fill="#00FFFFFF" StrokeThickness="8" Width="32" Height="32">
              <Ellipse.Resources>
                <Storyboard x:Name="wtspin" Storyboard.TargetName="wtrt" Storyboard.TargetProperty="Angle">
                  <DoubleAnimation From="0" To="360" BeginTime="0:0:0" Duration="0:0:0.45" RepeatBehavior="Forever"/>
                </Storyboard>
              </Ellipse.Resources>
              <Ellipse.Stroke>
                <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
                  <GradientStop Color="#E5FFFFFF" Offset="0"/>
                  <GradientStop Color="#00000000" Offset="0.87"/>
                </LinearGradientBrush>
              </Ellipse.Stroke>
              <Ellipse.RenderTransform>
                <TransformGroup>
                  <RotateTransform x:Name="wtrt" Angle="20" CenterX="16" CenterY="16"/>
                </TransformGroup>
              </Ellipse.RenderTransform>
            </Ellipse>
          </Canvas>
        </Canvas>


	<!-- title text -->
        <Canvas x:Name="TitleText" Width="250" Height="21.9" Canvas.Left="7.5" Canvas.Top="3.5" RenderTransformOrigin="0.5,0.5">
          <Canvas.RenderTransform>
            <TransformGroup>
              <ScaleTransform ScaleX="1" ScaleY="1"/>
              <SkewTransform AngleX="0" AngleY="0"/>
              <RotateTransform Angle="0"/>
              <TranslateTransform X="0" Y="0"/>
            </TransformGroup>
          </Canvas.RenderTransform>

	  <!-- shadow layer -->
          <TextBlock x:Name="mt" Width="280" Height="19" FontSize="14" TextWrapping="Wrap" Canvas.Left="1.5" Canvas.Top="2"/>
          
          <!-- top layer -->
          <TextBlock x:Name="mt1" Width="280" Height="19" FontSize="14" TextWrapping="Wrap" Foreground="#A4FFFFFF" Canvas.Top="1.5"/>
        </Canvas>
        
        <!-- time canvas -->
        <Canvas Width="219" Height="22" Canvas.Left="95" Canvas.Top="289.917" x:Name="positionTextCanvas">
          <TextBlock x:Name="progressText0" Width="115" Height="19" FontSize="12" Text="0:00 / 0:00" TextWrapping="Wrap" Canvas.Left="154.5" Canvas.Top="1.5"/>
          <TextBlock x:Name="progressText1" Width="115" Height="19" FontSize="12" Text="0:00 / 0:00" TextWrapping="Wrap" Foreground="#A4FFFFFF" Canvas.Left="154" Canvas.Top="1"/>
        </Canvas>
        
        <!-- progress bar -->
        <Canvas x:Name="progressCanvas" Width="320" Height="7" Canvas.Left="6" Canvas.Top="270.9">
          <Rectangle Stroke="#72FFFFFF" StrokeThickness="1" RadiusX="3" RadiusY="3" Width="320" Height="6"/>
          <Rectangle Stroke="#822C2C2C" StrokeThickness="1" RadiusX="3" RadiusY="3" Width="320" Height="6" Canvas.Top="1"/>
          <Rectangle Fill="#75FFFFFF" StrokeThickness="1" RadiusX="3" RadiusY="3" Height="4" x:Name="downloadProgressRect" Canvas.Left="1" Canvas.Top="1"/>
          <Rectangle Fill="#FFB90C00" StrokeThickness="1" RadiusX="3" RadiusY="3" Height="3.5" x:Name="playbackProgressRect" Canvas.Left="1" Canvas.Top="1.5"/>

        </Canvas>
        
        <!-- slider control -->
        <Canvas x:Name="progressThumb" Width="20" Height="11" Canvas.Left="6" Canvas.Top="269">
          <Rectangle StrokeThickness="1" RadiusX="4" RadiusY="9" Width="20" Height="11" Stroke="#46000000">
            <Rectangle.Fill>
              <LinearGradientBrush EndPoint="0.5,-0.409" StartPoint="0.5,1.409">
                <GradientStop Color="#FF13398C" Offset="0.242"/>
                <GradientStop Color="#FF032372" Offset="0.333"/>
              </LinearGradientBrush>
            </Rectangle.Fill>
          </Rectangle>
          <Rectangle StrokeThickness="1" RadiusX="4" RadiusY="9" Width="16" Height="8" Canvas.Left="1.962" Canvas.Top="0.327">
            <Rectangle.Fill>
              <LinearGradientBrush EndPoint="0.5,-0.409" StartPoint="0.5,1.409">
                <GradientStop Color="#00FFFFFF" Offset="0.13"/>
                <GradientStop Color="#FFFFFFFF" Offset="1"/>
              </LinearGradientBrush>
            </Rectangle.Fill>
          </Rectangle>
        </Canvas>
      </Canvas>
    </Canvas>

  <Canvas x:Name="fsm" Visibility="Hidden" Background="White">
    <Canvas.Background>
      <VideoBrush SourceName="media" Stretch="Fill"/>
    </Canvas.Background>
  </Canvas>
 
</Canvas>